<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="text-center pt-80">
    <img class="h-60" src="../assets/img/logo@3x.png" alt="" />
    <h2 class="text-6xl">欢迎回来</h2>
    <p class="text-4xl">请在下方输入您的账号</p>
  </div>
  <div class="px-20">
    <div class="py-8">账号</div>
    <custom-input
      icon="icon-youxiang"
      holder="请输入账号"
      v-model="account.username"
    />
  </div>
  <div class="px-20">
    <div class="py-8">密码</div>
    <custom-input
      icon="icon-mimaguanli"
      holder="请输入密码"
      v-model="account.password"
    />
  </div>
  <div class="p-20">
    <van-button color="rgba(249, 115, 22)" block @click="handleLogin"
      >登录</van-button
    >
  </div>
  <div class="text-center fixed left-0 w-full bottom-0 pb-80">
    还没有账号？<RouterLink to="/reg" class="caret-orange-500"
      >去注册</RouterLink
    >
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useAccount } from "../store/user";
const { loginAction } = useAccount();
const account = reactive({
  username: "张三丰",
  password: "123",
});
const handleLogin = () => {
  console.log(account);
  loginAction(account);
};
</script>

<style scoped></style>
